import React, { useState, useEffect } from 'react';
import './SeamlessScrollDemo.css';

const SeamlessScrollDemo = () => {
  // 模拟数据
  const [scrollData, setScrollData] = useState([
    { id: 1, text: '数据项 1: 2023-06-01 10:00:00 - 服务器状态正常', status: 'normal' },
    { id: 2, text: '数据项 2: 2023-06-01 10:00:05 - 用户登录成功', status: 'success' },
    { id: 3, text: '数据项 3: 2023-06-01 10:00:10 - 数据库连接稳定', status: 'normal' },
    { id: 4, text: '数据项 4: 2023-06-01 10:00:15 - 新订单创建', status: 'info' },
    { id: 5, text: '数据项 5: 2023-06-01 10:00:20 - 支付处理完成', status: 'success' },
    { id: 6, text: '数据项 6: 2023-06-01 10:00:25 - 库存更新成功', status: 'warning' },
    { id: 7, text: '数据项 7: 2023-06-01 10:00:30 - 系统性能良好', status: 'normal' },
    { id: 8, text: '数据项 8: 2023-06-01 10:00:35 - 安全检查通过', status: 'success' },
    { id: 9, text: '数据项 9: 2023-06-01 10:00:40 - 备份任务执行', status: 'info' },
    { id: 10, text: '数据项 10: 2023-06-01 10:00:45 - 网络流量正常', status: 'normal' }
  ]);

  const [isPaused, setIsPaused] = useState(false);

  // 模拟实时数据更新
//   useEffect(() => {
//     const interval = setInterval(() => {
//       const newItem = {
//         id: Date.now(),
//         text: `实时数据: ${new Date().toLocaleTimeString()} - 系统运行正常`,
//         status: 'success'
//       };
//       setScrollData(prev => [...prev.slice(-9), newItem]);
//     }, 5000);

//     return () => clearInterval(interval);
//   }, []);

  return (
    <div style={{height: "100%"}}>

      {/* 垂直滚动 */}
      <div className="scroll-section">
        <div
          className={`vertical-scroll-container ${isPaused ? 'paused' : ''}`}
          onMouseEnter={() => setIsPaused(true)}
          onMouseLeave={() => setIsPaused(false)}
        >
          <div className="vertical-scroll-content">
            {scrollData.map((item, index) => (
              <div key={`${item.id}-${index}`} className={`scroll-item ${item.status}`}>
                <span className="item-dot"></span>
                <span className="item-text">{item.text}</span>
              </div>
            ))}
            {/* 复制一份数据实现无缝滚动 */}
            {scrollData.map((item, index) => (
              <div key={`copy-${item.id}-${index}`} className={`scroll-item ${item.status}`}>
                <span className="item-dot"></span>
                <span className="item-text">{item.text}</span>
              </div>
            ))}
          </div>
        </div>

      </div>

    </div>
  );
};

export default SeamlessScrollDemo;
